<template>
  <div class="box">
    <header class="header">
       <van-nav-bar
        title="登录"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-field
        v-model="loginname"
        center
        clearable
        placeholder="账户名/手机号/邮箱"
      >
      </van-field>
      <van-field
        v-model="password"
        center
        clearable
        placeholder="密码"
      >
      </van-field>
      <van-button @click="login" :disabled="flag" round class="btn" block color="#ff6666">登录</van-button>
      <router-link to="/register/step1">立即注册</router-link>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Field, Button } from 'vant'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
export default {
  data () {
    return {
      loginname: '1881300781',
      password: 'Ty2103'
    }
  },
  computed: {
    flag () {
      return !/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password) || this.loginname.length < 3
    }
  },
  methods: {
    login () {
      this.$store.dispatch('loginAction', {
        loginname: this.loginname,
        password: this.password
      }).then(() => {
        this.$router.back()
      })
    }
  }
}
</script>
